<template>
  <div class="login">
    <div class="form">
      <div class="form-group">
        <div class="form-inline">
          <input type="text" class="form-control" placeholder="请输入手机号" v-model="phone">
        </div>
      </div>
      <div class="form-group">
        <div class="form-inline">
          <input type="text" class="form-control"  v-model="codes" placeholder="请输入短信验证码">
          <button class="code" @click="getCode" :disabled='code.disabled'>{{code.msg}}</button>
        </div>
      </div>
      <div class="ctrl">
        <button class="ctrl-login" @click="login">
          登 录
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import { Indicator } from 'mint-ui';
export default {
  name: 'login',
  components:{Indicator},
  data () {
    return {
      code:{
        msg:'获取验证码',
        time:0,
        int:0,
        disabled:false,
        can:true
      },
      phone:'',
      codes:'',
      canLogin:true
    }
  },
  created(){

  },
  methods:{
    getCode(){
      let self = this;
      var myReg = /^1[34578]\d{9}$/;
      if(!self.phone){
        self.$toast('手机号不可为空');
        return;
      }else if(!myReg.test(self.phone)){
        self.$toast('手机号码有误');
        return;
      }
      // if()
      if(self.code.time==0&&!self.code.disabled){
        if(!self.code.can){
          self.$toast('请勿重复提交');
          return
        }else{
          Indicator.open();
          self.code.can=false;
        }
        self.yl.get({
          url:'/merchant/login_api/code.json',
          data:{
            mobile:self.phone
          },
          success:function(res){
            Indicator.close();
            self.code.can=true;
            if(res.result=='success'){
              self.code.time=60;
              self.code.msg='重新获取('+self.code.time+'s)';
              self.code.disabled=true;
              self.code.int=setInterval(function(){
                self.code.time--;
                self.code.msg='重新获取('+self.code.time+'s)';
                if(self.code.time==0){
                  clearInterval(self.code.int);
                  self.code.int=null;
                  self.code.disabled=false;
                  self.code.msg='重新获取';
                }
              },1000)
            }else{
              self.$toast(res.errorMsg)
            }
          }
        })
      }
    },
    login(){
      let self = this;
      var myReg = /^1[34578]\d{9}$/;
      if(!self.phone){
        self.$toast('手机号不可为空');
        return;
      }else if(!myReg.test(self.phone)){
        self.$toast('手机号码有误');
        return;
      }
      if(!self.canLogin){
        self.$toast('请勿重复提交！');
        return;
      }
      if(self.codes){
        self.canLogin=false;
        Indicator.open();
        self.yl.get({
          url:'/merchant/login_api/verify.json',
          data:{
            mobile:self.phone,
            verifycode:self.codes
          },
          success:function(res){
            Indicator.close();
            self.canLogin=true;
            if(res.result=='success'){
              self.$router.push('/')
            }else{
              self.$toast(res.errorMsg)
            }
          }
        })
      }else{
        self.$toast('验证码不可为空')
      }
      
    }
  },
  computed:{
    type(){
      return this.$store.state.type;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login{
  width: 100%;
  height: 100%;
  min-height: 8rem;
  background: #f0eff5;
  padding-top: 2.8rem;
  box-sizing: border-box;
  color: #fff;
  position: absolute;
  bottom: 0;
}
.form{
  width: 5.5rem;
  margin: auto;
}
.form .form-group{
  margin-bottom: .6rem;
}
.form .form-inline{
  margin-bottom: .2rem;
  font-size: .3rem;
}

.form .form-group .code{
  float: right;
  min-width: 1.9rem;
  height: .93rem;
  /* border: 1px solid #fffcff; */
  border-radius: 5px;
  position: relative;
  top: 1px;
  color: #fffcff;
  /* left: .1rem; */
  float: right;
  padding: 0 .19rem;
  font-size: .28rem;
  background: #e57653;
}
.form .form-group .code[disabled]{
  background: #cecece;
  /* border: 1px solid #9a979a; */
}
.form .form-group:nth-child(1) .form-control{
  width: 100%;
}
.form .form-control{
  width: 3rem;
  height: .93rem;
  padding-left: .2rem;
  border: 1px solid #d2d2d3;
  border-radius: 5px;
  background: #fff;
  color: #000;
  font-size: .28rem;
}
.form .form-control::-webkit-input-placeholder
{
  color:#777177;
}
.form .form-control:-moz-placeholder{
  color: #777177;
}
.ctrl{
  width: 100%;
  text-align: center;
  margin-top: 1rem;
}
.ctrl .ctrl-login{
  width: 100%;
  height: .9rem;
  font-size: .5rem;
  color: #fff;
  border-radius: .2rem;
  background: #e57653;
}
</style>
